<!DOCTYPE html>
<html><head>
	<link type="text/css" rel="stylesheet" href="css/jgraduate.css"/>
	<link type="text/css" rel="stylesheet" href="css/jPicker.css"/>
	<style type="text/css">
		#grad_picker { display: none; }
		.button {
			border: solid 1px darkgrey;
			background-color: white;
			width: 50px; height: 50px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jpicker.min.js"></script>
	<script type="text/javascript" src="jquery.jgraduate.js"></script>
	<script type="text/javascript">
	$(function() {
		var launchPicker = function(elem, paint) {
			var pos = elem.position();
			$('#gradPicker').css({'left': pos.left, 'top': pos.top}).jGraduate(
				{ 
					paint: paint,
					window: { pickerTitle: "Pick a paint for the demo", },
				}, 
				function(p) {
					$('#r').attr('fill-opacity', p.alpha/100);
					if (p.type == "linearGradient") {
						var oldgrad = document.getElementById("grad");
						var newgrad = document.importNode(p.linearGradient, true);
						newgrad.id = "grad";
						// replace the old gradient with the new one
						var parent = oldgrad.parentNode;
						parent.replaceChild(newgrad, oldgrad);
						$('#r').attr('fill', 'url(#grad)');
					} else if (p.type == "radialGradient") {
						var oldgrad = document.getElementById("grad");
						var newgrad = document.importNode(p.radialGradient, true);
						newgrad.id = "grad";
						// replace the old gradient with the new one
						var parent = oldgrad.parentNode;
						parent.replaceChild(newgrad, oldgrad);
						$('#r').attr('fill', 'url(#grad)');
					}
					else { // solid color
						$('#r').attr('fill', (p.solidColor!='none'?'#':'') +p.solidColor);
					}
				},
				function(p) {});
		};
		
		$('#button1').click(function() { 
			var paint = new $.jGraduate.Paint();
			
			var alpha =  100;
			fill = "";
			var grad = document.getElementById("grad")
			if (fill == "url(#grad)" && grad.tagName == "linearGradient") {
				paint = new $.jGraduate.Paint({alpha: alpha, linearGradient: grad});
			} else if(fill == "url(#grad)" && grad.tagName == "radialGradient") {
				paint = new $.jGraduate.Paint({alpha: alpha, radialGradient: grad});
			} else {
				paint = new $.jGraduate.Paint({alpha: alpha, solidColor: 'red'});
			}
			launchPicker($(this), paint); 
		});
		$('#button1').click();
	});
	</script>
	<title>jGraduate Test Page</title>
</head><body>
	<div id="gradPicker"></div>
	<div id="button1" class="button"></div>	
</body></html>
